import { insertDom, getStyle, pxToNumber, setStyle } from "./util.js"

class NodeManager {
    constructor(data, container, option, deg = 0, isCenter) {
        this.container = container
        this.data = data
        this.option = option
        this.deg = deg
        this.wrapper
        this.init(isCenter)
        isCenter && this.initContent(data)
    }


    init(isCenter) {
        this.dom = insertDom(this.container,
            { className: isCenter ? 'sc-center-item' : 'sc-node-item' })
        this.wrapper = this.dom
        // 插入回正反转dom
        this.initRotateDom()
    }


    initRotateDom() {
        const customDom = insertDom(this.dom, {}, {
            transform: `rotate(${360 - this.deg}deg)`
        })
        this.wrapper = customDom
    }

    // 设置旋转角
    setAngle() {
        const containerWidth = pxToNumber(getStyle(this.container, 'width'))
        const itemWidth = pxToNumber(getStyle(this.wrapper, 'width'))
        setStyle(this.dom, {
            transform: `translate(-50%,-50%) rotate(${this.deg}deg)`,
            transformOrigin: `${-1 * (containerWidth / 2 - itemWidth / 2)}px center`
        })
    }


    returnWrapper() {
        return this.wrapper
    }

    initContent(data) {
        const renderFun = data.render || this.option.render
        if (renderFun) {
            renderFun(this.wrapper, data)
        }
    }
}

export default NodeManager